<template>
  <div class="conter">
    <van-nav-bar @click-left="onClickLeft">
      <template #left>
        <van-icon name="arrow-left" color="#000" size="22" />
      </template>
      <template #right>
        <van-cell title="分享" @click="showShare = true" />
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="options"
          @select="onSelect"
        />
      </template>
    </van-nav-bar>
    <!-- 首图开始 -->
    <div class="image">
      <img src="../assets/image/e69244449e60576162950771a2cf5ed5.png" />
      <span class="title">汤拌豆腐丝</span>
    </div>
    <!-- 首图结束 -->
    <!-- 用户头像,用户名开始 -->
    <div class="user">
      <img src="../assets/portrait/user_no_photo.png" style="width: 10%" />
      <span class="userName">跳舞的苹果</span>

      <van-tag  plain   type="primary" size="large" color="#d43c33" v-if="click" @click="onClick">关注</van-tag>
      <van-tag plain type="primary" size="large" color="#d43c33" v-else>已关注</van-tag>
    </div>
    <p class="p">
      过年了，各种鱼啊肉啊肯定少不了，虽然好吃，但是吃多了就觉得肠胃不舒服了，所以一些素菜凉菜就要显“身手”了。这道“烫拌豆腐丝”虽然是凉菜范畴，但是不伤肠胃，即使是南方不常吃生食的朋友也会喜欢的。
    </p>
    <p class="p">
      这道烫拌豆腐丝既起到了消毒效果，又保留了“生菜”的脆嫩鲜香的口感，再加上一些家常调料，看似简单不起眼，实则开胃的效果极佳，而且营养也全面，丰富的植物蛋白质、膳食纤维、多种维生素和矿物质都挺全乎。
    </p>
    <p class="p">
      春节团圆饭，咱们好不容易放假在家待几天了，不妨把这小菜端上桌，好吃还有口彩。“豆腐丝”，寓意连绵不断、细水长流的“福气”；多种蔬菜和多重口感寓意丰富多彩、前程似锦的生活。总之，用你的聪明智慧，把这小菜编排得喜庆、吉祥，做着简单，吃得开心。
    </p>
    <!-- 用户头像,用户名结束 -->
    <!-- 食材清单开始 -->
    <p class="p1">食材清单 </p>

    <div v-for="(item, index) in array" :key="index">
      <van-row type="flex" justify="space-around">
        <van-col span="6">{{ item.ingredient }}</van-col>
        <van-col span="6">{{ item.summer }}</van-col>
      </van-row>
    </div>
    <p class="p1">烹饪步骤</p>
    <van-card
      v-for="(item,index) in step" :key="index"
      :desc="item.desc"
      :title="item.title"
      :thumb="item.img"
    />
    <p class="p1">烫拌豆腐丝的烹饪技巧</p>
    <p class="sp">1.豆腐丝切得越细越好，不要入开水锅中焯烫，那样会导致豆腐丝烂糟糟的没弹性，用开水烫拌2-3次，既能消毒又能让豆腐丝柔软还不失弹性口感；</p>
      <p class="sp">2. 姜丝、白胡椒粉、少许米醋、泼热油，都是点睛之笔，缺少哪一个这味就都不同了，别偷懒，一定要把这几步做全乎了；</p> 
       <p class="sp"> 3. 胡萝卜丝不焯水，切得细细的，经过调料一腌，很快就变软且入味了。</p>

    <div style="height: 35rem"></div>
  </div>
</template>
<script>
import Vue from "vue";
import { Lazyload } from "vant";
Vue.use(Lazyload);
export default {
  data() {
    return {
      click: true,
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
      array: [
        {
          ingredient: "豆腐皮",
          summer: "2张",
        },
        {
          ingredient: "香菜",
          summer: "2棵",
        },
        {
          ingredient: "垃圾粉",
          summer: "适量",
        },
        {
          ingredient: "黄牌沙茶王",
          summer: "适量",
        },
        {
          ingredient: "芝麻",
          summer: "适量",
        },
        {
          ingredient: "十三香",
          summer: "适量",
        },
        {
          ingredient: "米醋",
          summer: "适量",
        },
        {
          ingredient: "油",
          summer: "适量",
        },
        {
          ingredient: "盐",
          summer: "适量",
        },
        {
          ingredient: "生抽(或豉油)",
          summer: "适量",
        },
      ],
      //步骤数组
      step:[{
        title:"步骤1",
        desc:"豆腐皮(千张)胡萝卜',姜,香菜清洗干净",
        img:require("../assets/image/200_c08eef180febea1a233191d3cbb9c329.jpg")
      },
      {
        title:"步骤2",
        img:require("../assets/image/200_c08eef180febea1a233191d3cbb9c329.jpg"),
        desc:"豆腐皮卷成卷，切细丝，越细越好",
      },
      {
        title:"步骤2",
        img:require("../assets/image/200_88b5518355db4547c684e983bf9d9d27.jpg"),
        desc:"豆腐皮卷成卷,切细丝,越细越好",
      },
      {
        title:"步骤3",
        img:require("../assets/image/200_5d0b31b37d5bb350a20e6698025a7137.jpg"),
        desc:"豆腐丝入大盆,用筷子挑散",
      },
      {
        title:"步骤4",
        img:require("../assets/image/200_6a46ad7912cf3b25d51f96865b31227d.jpg"),
        desc:"香菜切寸段,胡萝卜切细细的丝,越细越好",
      },
      {
        title:"步骤5",
        img:require("../assets/image/200_97bc9168cbd55825ab3b4661c148f881.jpg"),
        desc:"姜切细细的丝,入豆腐丝盆里",
      },
      {
        title:"步骤6",
        img:require("../assets/image/200_20f09b3f536dd99f3cba54047d84dd98.jpg"),
        desc:"热水烫过的豆腐又软又筋道,用筷子挑散",
      },
      {
        title:"步骤7",
        img:require("../assets/image/200_36cfc8cc756b0006a4c2f0d1f668bc81.jpg"),
        desc:"加入所需配料",
      },
      {
        title:"步骤8",
        img:require("../assets/image/200_ebb35b41999dce09606e6d2b7ede8d97.jpg"),
        desc:"略微拌几下,夹入盆中,堆成小山堆",
      },
      {
        title:"步骤9",
        img:require("../assets/image/200_e28e69d179ddf3238a2061a0100fd97b.jpg"),
        desc:"浇点儿热油,泼在豆腐丝上,上桌",
      },
      {
        title:"步骤10",
        img:require("../assets/image/200_bac542a160fdb2747ead0c72f129de26.jpg"),
        desc:"烫拌豆腐丝,鲜香味美,讨口彩",
      }]
    };
  },
  methods: {
    onClick(){
      this.click=false
    },
    onClickLeft() {
      //跳转回首页
      this.$router.go(-1);
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  },
};
</script>
<style scoped>
.conter {
  position: absolute;
  padding: 0 10px;
  font-family: "微软雅黑";
}
.image img {
  width: 100%;
  border-radius: 10px;
}
.title {
  position: relative;
  display: inline-block;
  left: 15px;
  padding: 15px 0 0 0;
  font-size: 22px;
  font-weight: bold;
}
.user {
  position: relative;
  top: -4px;
}
.userName {
  position: relative;
  font-size: 14px;
  top: -12px;
  left: 10px;
}
.van-tag {
  position: relative;
  right: -170px;
  top: -12px;
}
.p {
  font-size: 16px;
  text-align: left;

  line-height: 24px;
}
.p1 {
  font-size: 16px;
  font-weight: bold;
  margin: 15px;
}
.van-row {
  margin: 10px 0;
}
.van-col {
  color: #21d96e;
}
.sp{
  font-size: 14px;
  line-height: 18px;
  margin: 5px 0;
}
</style>